<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虹之间</title>
    <style type="text/css">
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .rainbow {
            width: 40em;
            height: 30em;
            position: relative;
            display: flex;
        }


        .rainbow div {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            flex: 1;
            background-color: currentColor;
            transition: 0.5s;
            transition-delay: calc(0.1s * var(--color));
        }

        /* 鼠标选中整体 => 整体 */
        .rainbow:hover {
            align-items: center;
            justify-content: center;
            transform: translateY(5em);
        }

        /* 鼠标选中整体 => Div */
        .rainbow:hover div {
            position: absolute;
            width: calc(100% - 2em * (var(--color) - 1));
            height: calc(135% - 2em * (var(--color) - 1));
            border-radius: 100%;
            background-color: transparent;
            border: 1em solid;
            border-color: transparent currentColor currentColor transparent;
            transform: rotate(225deg);
            filter: opacity(1);
        }

        .rainbow {
            transition: 1s;
        }

        /* 内部内容 */
        .rainbow div span {
            color: black;
            text-align: center;
            font-size: 25px;
        }

        .rainbow:hover span {
            display: none;
        }

        /* 第一个 Span 设置高度 */
        .rainbow div span:nth-child(1) {
            margin-top: 40px;
        }

        /* 第三个 Span 高度 */
        .rainbow div span:nth-child(3) {
            margin-top: 20px;
        }

        /* 设置剩余的 Span 高度 */
        .rainbow div span {
            margin-bottom: 5px;
        }

        /* 设置 Color 的值 */
        /* 配置颜色 */
        /* ! 第一个颜色 */
        .rainbow div:nth-child(1) {
            color: red;
            --color: 1;
        }

        /* ! 第二个颜色 */
        .rainbow div:nth-child(2) {
            color: orange;
            --color: 2;
        }

        /* ! 第三个颜色 */
        .rainbow div:nth-child(3) {
            color: yellow;
            --color: 3;
        }

        /* ! 第四个颜色 */
        .rainbow div:nth-child(4) {
            color: green;
            --color: 4;
        }

        /* ! 第五个颜色 */
        .rainbow div:nth-child(5) {
            color: blue;
            --color: 5;
        }

        /* ! 第六个颜色 */
        .rainbow div:nth-child(6) {
            color: purple;
            --color: 6;
        }

        @media screen and (max-width: 700px) {
            .rainbow {
                width: 20em;
                height: 10em;
                position: relative;
                display: flex;
            }

            .rainbow:hover div {
                position: absolute;
                width: calc(100% - 2em * (var(--color) - 1));
                height: calc(200% - 2em * (var(--color) - 1));
                border-radius: 100%;
                background-color: transparent;
                border: 1em solid;
                border-color: transparent currentColor currentColor transparent;
                transform: rotate(225deg);
                filter: opacity(1);
            }

            /* 内部内容 */
            .rainbow div span {
                color: black;
                text-align: center;
                font-size: 10px;
            }

            .rainbow:hover span {
                display: none;
            }

            /* 第一个 Span 设置高度 */
            .rainbow div span:nth-child(1) {
                margin-top: 10px;
            }

            /* 第三个 Span 高度 */
            .rainbow div span:nth-child(3) {
                margin-top: 5px;
            }

            /* 设置剩余的 Span 高度 */
            .rainbow div span {
                margin-bottom: 1px;
            }
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            for (var a = 1; a <= 6; a++) {
                var box = document.getElementById("box" + a);
                box.innerHTML = box.textContent.replace(/\S/g, "<span>$&</span>");
            }
        }
    </script>
</head>

<body>
    <!-- 彩虹整体 box -->
    <div class="rainbow">
        <!-- 彩虹颜色 box -->
        <div id="box1">生命Life</div>
        <div id="box2">治愈Healing</div>
        <div id="box3">阳光Sunlight</div>
        <div id="box4">自然Natural</div>
        <div id="box5">和谐Harmony</div>
        <div id="box6">精神Spirit</div>
    </div>
</body>

</html>